<template>
<view class="user-center" >
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <img src="/static/assets/xiaolan.webp" alt="" srcset="" class="avatar">
      <view class="user-info">
        <text class="username">{{username}}</text>
        <text class="user-id">ID: 123456</text>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="function-list">
      <checkbox-group @change="checkboxChange">
        <label class="function-item" @click="address">
           我的地址
        </label>
        <label class="function-item" @click="Follow">
           我的关注
        </label>
        <label class="function-item" @click="dingdan">
           我的订单
        </label>
      </checkbox-group>
    </view>

    <!-- 退出登录按钮 -->
    <button class="logout-btn" @click="handleLogout">退出登录</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username:"",
      token:""
    }
  },
  onload(){
    this.query()
  },
  onShow(){
    this.query()
     this.token = uni.getStorageSync('token')
  },
  methods: {
    //我的关注
    Follow(){
      uni.navigateTo({
        url:"/pages/follow/follow"
      })
    },
    //订单页面跳转
    dingdan(){
        uni.switchTab({
          url:"/pages/dingdan/dingdan"
        })
    },
    address(){
      uni.navigateTo({
        url:"/pages/address/address"
      })
    },
    //退出登录
    handleLogout(){
       uni.navigateTo({
        url: '/pages/login/login'
      })
       uni.removeStorageSync('token')
    },
     query() {
      this.token = uni.getStorageSync('token')
      uni.request({
        url: 'http://localhost:3000/user',
        method: 'GET',
        success: (res) => {
          console.log('请求成功:', res)
          res.data.forEach(element => {
            if(element.id== this.token){
                this.username=element.username
            }
              
          });
          
        }
      })
    },
  }
}
</script>

<style>
.user-center {
  padding: 30rpx;
}

.user-card {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;

  margin-right: 30rpx;
  
}

.username {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.user-id {
  font-size: 28rpx;
  color: #999;
}

.function-list {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
}

.function-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.function-item:last-child {
  border-bottom: none;
}

checkbox {
  margin-right: 20rpx;
}

.logout-btn {
  background: #fff;
  color: #f56c6c;
  border: 1rpx solid #f56c6c;
  border-radius: 16rpx;
}
.input{
  width: 200;
  background-color: #f5f5;
  margin: 20px;
  height: 50px;
}
</style>